<template>
  <div id="eduExp">
    <el-dialog v-model="dialogDelete" title="修改个人信息" width="30%">
      <span>删除后将不可恢复,确认了吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogDelete = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="eduExp">
      <div class="head">
        <div class="add" @click="workAdd">增加经历</div>
        <div class="title">我的工作史</div>
      </div>
      <div class="body">
        <div class="con">
          <table id="table">
            <thead>
              <tr>
                <th>公司名称</th>
                <th>所在城市</th>
                <th>起止时间</th>
                <th>工作图片</th>
                <th>自我评价</th>
                <th>编辑</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="ConLi" v-loading="loading" element-loading-background="rgba(0,0,0, 0.5)"
          element-loading-text="数据加载中...">
          <table id="table1">
            <tbody>
              <tr v-for="(item, index) in workData" :key="index">
                <th>
                  <div class="con">{{ item.weSeva }}</div>
                </th>
                <th>
                  <div class="con">{{ item.weCity }}</div>
                </th>
                <th>
                  <div class="con">{{ item.weStart }}-{{ item.weEnd }}</div>
                </th>
                <th>
                  <div class="con">
                    <el-popover placement="right">
                      <template #reference>
                        <img slot="reference" :src="global.$httpUrl+item.weImg" style="width: 50px;
                            height: 50px;
                            display: flex;
                            justify-content: center;
                            margin: 5% auto;" />
                      </template>
                      <img :src="global.$httpUrl+item.weImg" style="width: 150px; height: 150px" />
                    </el-popover>
                  </div>
                </th>
                <th class="thContent">
                  {{ item.weCon }}
                </th>
                <th class="lastTh">
                  <div class="editBtn">
                    <div class="edit" @click="workDetail">查看详情</div>
                    <div class="line">|</div>
                    <div class="delete" @click="dialogDelete = true">删除经历</div>
                  </div>
                </th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
//后端请求了
import { workExp } from "@/api";
//全局变量
const internalInstance = getCurrentInstance();
let global = internalInstance.appContext.config.globalProperties;

const router = useRouter();
const dialogDelete = ref(false);
const loading = ref(true); //加载
const workDetail = () => {
  router.push("/main/workExp/edit");
};
const workAdd = () => {
  router.push("/main/workExp/add");
};

const lamentImg = ref(
  "https://img.3dmgame.com/uploads/images/news/20200226/1582709598_408294.jpg"
);
const workData = ref();
//刚进入网页先得到表格数据
onMounted(() => {
  dataList();
});
const dataList = () => {
  workExp.allGet().then((res) => {
    loading.value = false; //取消加载
    workData.value = res;
    for (const key in res) {
      var date = new Date(res[key].weStart);
      var date2 = new Date(res[key].weEnd);
      var year = date.getFullYear(); //  返回的是年份
      var month = date.getMonth() + 1; //  返回的月份上个月的月份，记得+1才是当月
      var year2 = date2.getFullYear(); //  返回的是年份
      var month2 = date2.getMonth() + 1; //  返回的月份上个月的月份，记得+1才是当月
      
      res[key].weStart = year + "年" + month + "月"
      if(year2<2000){
        res[key].weEnd = "今"
      }else{
        res[key].weEnd = year2 + "年" + month2 + "月"
      }
     
    }
  });
};
</script>

<style lang="less" scoped>
#eduExp {
  width: 100%;
  height: 100%;

  .eduExp {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(65% 65%,
        transparent 0px,
        transparent 100%,
        cyan 100%);
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(0deg,
        rgba(white, 0.1),
        rgba(white, 0.3),
        rgba(white, 0.1));

    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;

      .add {
        float: left;
        margin: 1% 5%;
        width: 10%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: aqua;
        border: 1px solid aqua;
        font-size: 14px;
        border-radius: 50px;

        &:hover {
          color: black;
          background-color: aqua;
          cursor: pointer;
        }
      }

      .title {
        width: 20%;
        margin: 0 auto;
        height: 80%;
        text-align: center;
        color: aliceblue;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 5px solid aqua;
      }
    }

    .body {
      width: 95%;
      margin: 0 auto;
      height: 85%;
      overflow: hidden;

      .con {
        width: 100%;

        #table {
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;

          thead {
            border-bottom: 0.5px solid aqua;

            th {
              text-align: center;
              color: white;
              line-height: 50px;
              
              &:last-child {
                width: 15%;
              }

              &:nth-child(5) {
                width: 30%;
              }
            }
            
          }
        }
      }

      .ConLi {
        width: 100%;
        height: 90%;
        overflow: hidden;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 1px;
          height: 100%;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 2px;
          background: aqua;
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          border-radius: 2px;
          background: rgba(white, 0.2);
        }

        #table1 {
          font-size: 14px;
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;

          tbody {
            opacity: 1;

            th {
              font-weight: normal;
              color: white;
              line-height: 50px;

              &>.con {
                width: 95%;
                margin: 0 auto;
                /*1. 先强制一行内显示文本*/
                white-space: nowrap;
                /*2. 超出的部分隐藏*/
                overflow: hidden;
                /*3. 文字用省略号替代超出的部分*/
                text-overflow: ellipsis;
              }
            }
            .thContent{
                /*1. 先强制一行内显示文本*/
                white-space: nowrap;
                /*2. 超出的部分隐藏*/
                overflow: hidden;
                /*3. 文字用省略号替代超出的部分*/
                text-overflow: ellipsis;
            }
            th:nth-child(5) {
              width: 30%;
            }

            tr:nth-of-type(odd) {
              background: none;
            }

            tr:nth-of-type(even) {
              background-color: rgba(white, 0.15);
            }

            .lastTh {
              width: 15%;

              .editBtn {
                width: 100%;

                div {
                  width: 45%;
                  text-align: center;
                  font-weight: lighter;
                  float: left;
                  color: aqua;
                }

                .edit {
                  &:hover {
                    cursor: pointer;
                    color: #f4cd35;
                  }
                }

                .line {
                  width: 1px;
                  margin: 0 2%;
                  color: aqua;
                }

                .delete {
                  &:hover {
                    cursor: pointer;
                    color: red;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  :deep(.el-dialog) {
    --el-dialog-bg-color: rgba(cyan, 0.05);
    border-image-source: radial-gradient(65% 65%,
        transparent 0px,
        transparent 100%,
        cyan 100%);
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;

    .el-dialog__title {
      color: aqua;
    }

    .el-dialog__close {
      color: aqua;

      &:hover {
        color: red;
      }
    }

    .el-dialog__body {
      span {
        color: white;
      }
    }

    .el-button--primary {
      --el-button-bg-color: none;
      --el-button-border-color: rgba(aqua, 0.8);
      --el-button-hover-text-color: black;
      --el-button-hover-bg-color: rgba(aqua, 0.8);
      --el-button-hover-border-color: rgba(aqua, 0.8);
    }
  }
}
</style>
